<template>
	<div class="balabce">
		<div class="balabce-tests">
			<div >
				可用余额
				<p>￥{{memberDetails.yuE}}</p>
			</div>
		</div>

    <div class="balan">
      <van-list
        v-model="loading"
        :finished="finished"
        @load="getDeposit"
      >

        <div v-if="typeof lis=='string'" class="listDatasno" >{{lis}}</div>
        <div v-else v-for="(v,idx) in lis" :key="idx" class="listDatas" style="">
          <van-row class="b-lists" >
            <van-col v-if="v.remarks.length==0" span="16" style="padding:3px 10px;text-align: left;color:#ddd">
              暂无备注信息
            </van-col>
            <van-col v-else span="16" style="padding:3px 10px;text-align: left;">
              备注:{{v.remarks}}
            </van-col>
            <van-col span="8" style="padding:3px 10px;text-align: right">
              <span v-if="v.price>0" class="b-lists-money" style="">{{v.price}}元</span>
              <span v-else class="b-lists-money2"  >{{v.price}}元</span>
            </van-col>
          </van-row>
          <van-row>
            <van-col span="24" class="b-lists-time" >{{v.dates}}</van-col>
          </van-row>
        </div>
        <div class="noDatas" :style="{display:block}">
          数据已加载完
        </div>
      </van-list>

    </div>

    <!--返回按钮-->
    <van-button class="balabce-back" @click="onClickLeft">
      <i class="iconfont icon-icon_reply" style="display: block"></i>
      返回
    </van-button>
	</div>
</template>
<script type="text/javascript">
import { mapState } from 'vuex';

export default {
		name:"balabce",
		data(){
			return {
				currentPage:1,
				lis:[],
        block: 'none',
				pagesize:10,
        page:0,
        Totals:0,

        loading: false,
        finished: false
			}
		},
		computed: {
		    ...mapState({
		    	memberDetails:"data"
		    })
		},
		methods:{
			getDeposit(){
				var $this=this;
		    	this.$http.member.get('/deposit/'+this.$store.state.data.memberID+'/showvip',{
		    	  params:{
              page:$this.currentPage,
              pageSize:$this.pagesize
            }
          })
	            .then(function (response) {

	     		      // console.log(response.data.data);
	     		      $this.currentPage=response.data.data.current_page+1;//获取当前的下一页
	               var objs=response.data.data.data;

	               for(var i=0;i<objs.length;i++){
	               		if(objs[i].in=="0.00"||objs[i].in==""){
	               		  if(objs[i].out.indexOf("-")==-1){
                        objs[i].price=0;
                      }else{
                        objs[i].price=objs[i].out;
                      }
	               		}else if(objs[i].out=="0.00"||objs[i].out==""){
	               			objs[i].price="+"+objs[i].in;
	               		}

                   $this.lis.push(objs[i]);

	               }
                $this.loading = false;
                if(!objs.length){
                  $this.lis="暂无记录";
                  $this.finished = true;
                }else if ($this.lis.length >= response.data.data.total) {
                  $this.finished = true;
                  $this.block = 'block'
                }


	            })
	            .catch(function (error) {
	                console.log(error);
	            });
			},
			onClickLeft() {
          this.$router.push({name: 'memberDetails',params:{
            url:this.$store.state.data.path,
            vipId:this.$store.state.data.memberID
          }});
		      // this.$router.go(-1);
		    }

		},
		mounted(){
			// this.getDeposit();
		}
	}

</script>
<style type="text/css">
  .balabce{
    font-size:12px;
    color:#666;
  }
	.balabce .balabce-tests{
		display: flex;
		padding:10px 0;
		background-color: #0D90EB;
    position: fixed;
    top:0;
    left:0;
    width:100%;

	}
	.balabce .balabce-tests>div{
		width:100%;
		color:#fff;
    font-weight: bold;
    font-size: 16px;
	}
  .balabce-tests>div>p{
    margin:5px 0;
  }
  .balabce .balan{
    margin-top:82px;
  }
  .balabce-back{
    position: fixed!important;
    bottom:100px!important;
    right:10px!important;
    background:rgba(0,0,0,.5)!important;
    width:55px!important;
    height:auto!important;
    color:#fff!important;
    font-size:12px!important;
    padding:12px 0!important;
    border-radius: 5px!important;
    line-height: initial!important;
    border:0!important;
  }
  .balabce-back .iconfont{
    font-size:12px;
  }
  .b-lists{
    font-size:12px;color:#666
  }
  .b-lists-money{
    color:#01A761;font-size:16px;font-weight: bold;padding:5px 0;
  }
  .b-lists-money2{
    color:red;font-size:16px;font-weight: bold;padding:5px 0;
  }
  .b-lists-time{
    padding:3px 10px;text-align: left;font-size:12px;
  }
  .listDatas{
    padding:5px 0;font-size:16px;border-bottom:1px solid #ddd;background: #fff;
  }
  .listDatasno{
    color:#ddd;font-size:14px;padding:10px 0;
  }

</style>
